<template>
	<view class="service">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">门店主页</view>
			</template>
		</uv-navbar>
		<view class="header">
			<!-- <view class="address" @click="getList">
				<image src="@/static/images/address2.png"></image>
				<view>请选择</view>
			</view> -->
			<view class="search">
				<view class="search_view">
					<image src="@/static/images/c1.png"></image>
					<input type="text" placeholder="搜索关键词" v-model="name">
					<view class="submit" @click="submit">搜索</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="title">附近门店</view>
			<view class="list">
				<view class="item" v-for="item in follow_list" @click="router(`/pages/shop/index?id=${item.id}`)">
					<image :src="item.img" class="cover"></image>
					<view class="item_view">
						<view class="info_view">
							<view class="name_view">
								<view class="name">{{item.name}}</view>
								<view class="rate_icon" @click.stop="oper(item.id)">
									<image src="@/static/images/shop2.png"></image>
								</view>
							</view>
							<view class="label_view">
								<view class="rate_value">{{item.score}}分</view>
								<view class="time">{{item.trade}}</view>
							</view>
						</view>
						<view class="other">
							<!-- <view class="price">
								<text class="unit">￥</text>
								<text class="value">559.00</text>
								<text class="key">起</text>
							</view> -->
							<view class="address">
								<view class="address_deta">
									<image src="@/static/images/address.png"></image>
									<text>{{item.address}}</text>
								</view>
								<view class="gap">距我{{(item.distance/1000).toFixed(0)}}km</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item" v-for="item in store_list" @click="router(`/pages/shop/index?id=${item.id}`)">
					<image :src="item.img" class="cover"></image>
					<view class="item_view">
						<view class="info_view">
							<view class="name_view">
								<view class="name">{{item.name}}</view>
								<view class="rate_icon" @click.stop="oper(item.id)">
									<image src="@/static/images/shop1.png"></image>
								</view>
							</view>
							<view class="label_view">
								<view class="rate_value">{{item.score}}分</view>
								<view class="time">{{item.trade}}</view>
							</view>
						</view>
						<view class="other">
							<!-- 	<view class="price">
								<text class="unit">￥</text>
								<text class="value">559.00</text>
								<text class="key">起</text>
							</view> -->
							<view class="address">
								<view class="address_deta">
									<image src="@/static/images/address.png"></image>
									<text>{{item.address}}</text>
								</view>
								<view class="gap">距我{{(item.distance/1000).toFixed(0)}}km</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="item" @click="router(`/pages/shop/introduce?id=${p_id}`)">
				<image src="@/static/images/tabbar12.png"></image>
				<view>介绍</view>
			</view>
			<view class="item" @click="backRouter">
				<image src="@/static/images/c2.png"></image>
				<view>返回</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		clubInfo,
		storeFollow
	} from "@/request/api";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	import useWechat from "@/hooks/useWechat.js";
	const {
		router
	} = useBase();
	const {
		wxGetLocation
	} = useWechat();

	const oper = async (id) => {
		await storeFollow({
			id
		});
		uni.$uv.toast("操作成功");
		getList();
	};
	const backRouter = () => uni.navigateBack();

	const follow_list = ref([]);
	const store_list = ref([]);
	let id = '';
	const name = ref("");
	const getList = async () => {
		wxGetLocation(async (res) => {
			let latitude = res.latitude;
			let longitude = res.longitude;
			let {
				follow_store,
				store,
				info
			} = await clubInfo({
				id,
				name: name.value,
				longitude,
				latitude
			});
			follow_list.value = follow_store;
			store_list.value = store;
			uni.setStorageSync('introduce', info.introduce);
		});
		// let {
		// 	follow_store,
		// 	store,
		// 	info
		// } = await clubInfo({
		// 	id,
		// 	name: name.value,
		// 	longitude: "",
		// 	latitude: ""
		// });
		// follow_list.value = follow_store;
		// store_list.value = store;
		// uni.setStorageSync('introduce', info.introduce);
	};
	const submit = () => getList();
	onLoad(options => {
		id = options.id;
		getList();
	});
</script>

<style scoped lang="scss">
	$headerHeight: 230rpx;

	.service {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		background: #fff;
		overflow: hidden;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.header {
			height: $headerHeight;
			padding: 60rpx 30rpx 20rpx;
			box-sizing: border-box;
			background: #CA1C1D;

			.address {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				view {
					color: #FFFFFF;
					font-size: 28rpx;
					padding-left: 6rpx;
				}
			}

			.search {
				padding: 50rpx 20rpx 0;
				box-sizing: border-box;

				.search_view {
					width: 100%;
					height: 68rpx;
					border-radius: 34rpx;
					padding: 0 28rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					input {
						flex: 1;
						color: #999999;
						font-size: 26rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
					}

					.submit {
						color: #CA1C1D;
						font-size: 26rpx;
					}
				}
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - #{$headerHeight} - #{$tabbarHeight});

			.title {
				height: 80rpx;
				line-height: 80rpx;
				color: #333333;
				padding-left: 52rpx;
				box-sizing: border-box;
				position: relative;

				&::after {
					content: "";
					width: 10rpx;
					height: 30rpx;
					background-color: #CA1C1D;
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					z-index: 2;
				}
			}

			.list {
				.item {
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;

					.cover {
						width: 200rpx;
						height: 200rpx;
					}

					.item_view {
						flex: 1;
						padding: 4rpx 10rpx 10rpx 20rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info_view {
							.name_view {
								display: flex;
								justify-content: space-between;

								.name {
									color: #333333;
									font-size: 32rpx;
									font-weight: bold;
									padding-bottom: 18rpx;
									box-sizing: border-box;
								}

								.rate_icon {
									image {
										width: 40rpx;
										height: 40rpx;
									}
								}
							}

							.label_view {
								display: flex;

								.rate_value {
									height: 32rpx;
									line-height: 32rpx;
									color: #FFFFFF;
									font-size: 18rpx;
									border-radius: 6rpx;
									margin-right: 10rpx;
									padding: 0 8rpx;
									box-sizing: border-box;
									background: #F89D25;
								}

								.time {
									height: 32rpx;
									line-height: 32rpx;
									color: #999999;
									font-size: 18rpx;
									border-radius: 6rpx;
									padding: 0 14rpx;
									box-sizing: border-box;
									background: #EEEEEE;
								}
							}
						}

						.other {
							.price {
								padding-bottom: 18rpx;
								box-sizing: border-box;

								text {
									color: #CA1C1D;
									font-family: PingFang SC;
									font-weight: bold;

									&.unit {
										font-size: 24rpx;
									}

									&.value {
										font-size: 36rpx;
									}

									&.key {
										font-size: 28rpx;
									}
								}
							}

							.address {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.address_deta {
									display: flex;
									align-items: center;

									image {
										width: 24rpx;
										height: 24rpx;
									}

									text {
										color: #999999;
										font-size: 20rpx;
									}
								}

								.gap {
									color: #999999;
									font-size: 20rpx;
								}
							}
						}
					}
				}
			}
		}

		.footer {
			height: $tabbarHeight;
			display: flex;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&:last-child {
					image {
						transform: rotate(180deg);
					}

					view {
						color: #666666;
					}
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}

				view {
					color: #CA1C1D;
					font-size: 20rpx;
					padding-top: 12rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>